<template>
  <div class="commentlist-container">
    <van-cell :border="false">
      <div slot="title" v-if="comments.length">全部评论</div>
    </van-cell>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getComments"
    >
        <van-cell
          v-for="(comment, index) in comments"
          :key="index"
        >
          <van-image
            class="avatar"
            slot="icon"
            round
            fit="cover"
            :src="comment.aut_photo"
          />
          <div slot="title" class="comment-wrap">
            <div class="comment-title">
              <span class="author-name">{{ comment.aut_name }}</span>
              <div class="like-wrap">
                <van-icon name="good-job-o" />
                <span>{{ comment.like_count }}</span>
              </div>
            </div>
            <div class="comment-content">{{ comment.content }}</div>
            <div class="comment-pubdate">
              <span class="pubdate">{{ comment.pubdate | relativeTime }}</span>
              <van-button
                size="mini"
              ><span>回复{{ comment.reply_count }}</span></van-button>
            </div>
          </div>
        </van-cell>
      </van-list>
  </div>
</template>
<script>
import { comments } from '@/api/comment'
export default {
  name: 'commentList',
  data () {
    return {
      // 评论列表
      comments: [],
      // 加载状态
      loading: false,
      finished: false,
      // 获取下一页数据的页码
      offset: null,
      // 每页大小
      limit: 10
    }
  },
  props: {
    articleId: {
      type: [Number, Object, String],
      required: true
    }
  },
  methods: {
    // 获取评论列表
    async getComments () {
      // 请求数据接口
      const res = await comments({
        type: 'a',
        source: this.articleId.toString(),
        offset: this.offset,
        limit: this.limit
      })
      // 将获取的数据, 添加到评论列表中
      this.comments.push(...res.data.data.results)
      // 改变loading状态
      this.loading = false
      // 判断是否还有评论
      if (res.data.data.results.length) {
        // 如果有，更新获取下一页数据的页码
        this.offset = res.data.data.last_id
      } else {
        // 如果没有，则将 finished 设置为 ture，不再触发加载更多了
        this.finished = true
      }
      this.$emit('comments', this.comments)
    }
  }
}
</script>
<style lang="less">
.commentlist-container{
  .van-cell{
    .avatar{
      width: 36px;
      height: 36px;
    }
    .comment-wrap{
      .comment-title{
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        .author-name{
          color: rgb(70, 107, 157);
        }
        .like-wrap{
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .comment-content{
        font-size: 14px;
        margin: 12px 0;
      }
      .comment-pubdate{
        display: flex;
        font-size: 12px;
        color: #969799;
        .pubdate{
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
